// 原生js实现JQuery方法
window.$ = HTMLElement.prototype.$ = function(selector) {
	return (this == window ? document : this).querySelectorAll(selector);
}
window.onload = function() {
	// 鼠标经过手机京东/客户服务显示对应下拉列表
	$("#top_box .app_jd")[0].onmouseover =
		$("#top_box .service")[0].onmouseover = showItems;
	// 鼠标从手机京东/客户服务移出去隐藏对应下拉列表
	$("#top_box .app_jd")[0].onmouseout =
		$("#top_box .service")[0].onmouseout = hideItems;
	// 鼠标经过全部商品分类显示二级菜单鼠标绑定事件
	$("#category")[0].addEventListener("mouseover", showCate, false);
	$("#category")[0].addEventListener("mouseout", hideCate, false);
	// 鼠标经过二级菜单显示三级菜单
	var lis = $("#cate_box>li");
	// 遍历两个li
	for (var i = 0; i < lis.length; i++) {
		lis[i].onmouseover = showSubCate;
		lis[i].onmouseout = hideSubCate;
	}
	$("#stock_select>h3")[0].onmouseover=showStore;
	$("#stock_select>h3")[0].onmouseout=hideStore;
	//初始化图片调用方法
	pPhoto.init();
}

function showItems() {
	this.$("[id$='_items']")[0].style.display = "block";
	this.$("a").className = "hover";
}

function hideItems() {
	this.$("[id$='_items']")[0].style.display = "none";
	this.$("a")[0].className = "";
}
//鼠标经过全部商品分类显示二级菜单方法
function showCate() {
	this.$("#cate_box")[0].style.display = "block";
}

function hideCate() {
	this.$("#cate_box")[0].style.display = "none";
}
// 鼠标经过二级菜单显示三级菜单方法
function showSubCate() {
	this.$("h3")[0].className = "hover";
	this.$(".sub_cate_box")[0].style.display = "block";
}

function hideSubCate() {
	this.$("h3")[0].className = "";
	this.$(".sub_cate_box")[0].style.display = "none";
}
function showStore(){
	$("#store_content")[0].style.display="block"
}
function hideStore(){
	$("#store_content")[0].style.display="none"
}
var pPhoto = {
	// 移动按钮显示小图片
	LIWIDTH: 62, //常量
	moved: 0, //计数器:记录的是向左移图片的个数,按下左按钮-1,按下右按钮+1(初始值)
	count: 0, //计数器:记录的小图片的总数,moved==0,左按钮呈白色禁止使用;
	//count-moved==5,右按钮呈白色禁止使用
	ul: null, //li的父元素
	btnL: null, //代表左按钮
	btnR: null, //代表右按钮
	superMask:null,
	SUPERWIDTH:350,//superMask的宽
	SUPERHEIGHT:350,//superMask的高,和大图的宽高一致,
	MASKWIDTH:175,//遮罩层的宽,
	MASKHEIGHT:175,//遮罩层的高,和中图的宽高一致
	init:function(){
		// 找到ul
		this.ul = $("#icon_list")[0];
		this.ul.onmouseover=this.changeMimg;
		this.btnL = this.ul.parentNode.$("a")[0]; //获取左按钮
		this.btnR = this.ul.parentNode.$("a")[1]; //获取右按钮
		this.btnL.onclick = this.btnR.onclick = function() { //左按钮与右按钮分别添加点击事件
			pPhoto.move(this); //当前对象进行调用
		}
		this.count = this.ul.$("li").length;//所有小图片个数
		//获取透明版的div
		this.superMask=$("#superMask")[0];
		this.superMask.onmouseover=this.superMask.onmouseout=this.showMask;
		this.superMask.onmousemove=function(){
			//兼容浏览器
			var e=window.event||arguments[0];
			pPhoto.zoom(e);
		}
	},
	// 当鼠标移到透明版div中,同时移动遮罩层mask,把对应中图u的位置转化成大图的相应位置
	zoom:function(e){
		// 获取鼠标点相对于superMask的坐标y
		var x=e.offsetX;
		var y=e.offsetY;
		// 获取遮罩层边框相对于superMask的距离 mTop mLeft
		var mTop=y-this.MASKHEIGHT/2;
		// 获取mLeft
		var mLeft=x-this.MASKWIDTH/2;
		// 设置上下边界
		mTop<0&&(mTop=0);
		mTop>this.SUPERHEIGHT-this.MASKHEIGHT&&(mTop=this.SUPERHEIGHT-this.MASKHEIGHT);
		// 设置左右边界
		mLeft < 0 && (mLeft = 0);
		mLeft>this.SUPERWIDTH-this.MASKWIDTH&&(mLeft=this.SUPERWIDTH-this.MASKWIDTH);
		$("#mask")[0].style.top=mTop+"px";
		$("#mask")[0].style.left=mLeft+"px";
		// 获取大图div的位置
		$("#largeDiv")[0].style.backgroundPosition=-mLeft*2+"px "+-mTop*2+"px";
	},
	// 当鼠标进入superMask时显示遮罩层
	// 当鼠标离开superMask时隐藏遮罩层
	// 显示遮罩层和大图片时,给大图片div修改背景
	showMask:function(){
		// 获取遮罩层
		var mask=$("#mask")[0];
		var style=getComputedStyle(mask);
		mask.style.display=style.display=="none"?"block":"none";
		//获取大图片div
		var largeDiv=$("#largeDiv")[0];
		//将大图片显示或者隐藏和遮罩层地显示或者隐藏保持一致
		largeDiv.style.display=mask.style.display;
		// 显示largeDiv,根据中图片修改大图片div的背景
		if(largeDiv.style.display=="block"){
			// 获取中图片的路径
			var path=$("#mImg")[0].src;
			var i=path.lastIndexOf(".");
			//中图1:src=images/products/product-s1-m.jpg
			//大图1:src=images/products/product-s1-l.jpg
			$("#largeDiv")[0].style.backgroundImage="url('"+path.slice(0,i-1)+"l"+path.slice(i)+"')";
		}
	},
	// 点击按钮移动小图片
	move: function(btn) {
		// 当按钮可以点击的时候
		if (!btn.className.endsWith("_disabled")) {
			if (btn == this.btnR) {
				this.ul.style.left = -(this.LIWIDTH * (++this.moved) - 20) + "px";
			} else {
				this.ul.style.left = -(this.LIWIDTH * (--this.moved) - 20) + "px";
			}
			this.btnEnable(); //调用方法
		}
	},
	// 根据count和move判断按钮的状态
	btnEnable: function() {
		//当左侧图片为0,左侧禁止
		if (this.moved == 0) {
			this.btnL.className += "_disabled"; //给左按钮加"_disabled"
		}
		//当右侧图片为0,右侧禁止
		else if (this.count - this.moved == 5) {
			this.btnR.className += "_disabled"; //给右按钮加"_disabled"
		}
		//当按钮为可点击状态
		else {
			this.btnL.className = this.btnL.className.replace("_disabled", "")
			this.btnR.className = this.btnR.className.replace("_disabled", "")
		}
	},
	//当鼠标经过八个小图标对应的`中图,把小图的路径scr变成相对应中图的scr
	//小图:src=images/products/product-s1.jpg
	//中图:src=images/products/product-s1-m.jpg
	changeMimg:function(){
		//先获取事件对象,兼容浏览器,旧版的IE浏览器
		var e=window.event||arguments[0];
		//获取目标元素的src
		var src=e.srcElement||e.target;
		//判断目标元素src的外层标签是否是img标签
		if(src.nodeName=="IMG"){
			//如果是,取出src属性
			var path=src.src;
			//将小图的路径通过,进行分割,分割成两部分,i是下标
			var i=path.lastIndexOf(".");
			//找到img,设置img的src属性
			//获取中图的img
			$("#mImg")[0].src=path.slice(0,i)+"-m"+path.slice(i);  //path.slice(0,i)+"-m"对应"s1-m",path.slice(i)对应"jpg"
		}
	}
}
